<template>
    <div>
        <div class="box">
            <div class="bos">
                <div class="nav">
                    <div class="navFont">运营中心</div>
                    <div class="navOne">
                        <div class="navTwo">
                            <div class="btn" :class="{ active: itemIndex == 1 }" @click="btnClick(1)">数据传输管理</div>
                            <div class="btn" :class="{ active: itemIndex == 2 }" @click="btnClick(2)">操作日志管理</div>
                            <div class="btn" :class="{ active: itemIndex == 3 }" @click="btnClick(3)">设备检测</div>
                            <div class="btn" :class="{ active: itemIndex == 4 }" @click="btnClick(4)">接口日志</div>
                        </div>
                        <div>
                            <a-date-picker v-model:value="value3" picker="month" @change="onHandleChange" />
                        </div>
                    </div>
                </div>
                <div v-if="itemIndex == 1">
                    <div class="container">
                        <div class="tableTop">
                            <div class="tableTop-yi">#</div>
                            <div class="tableTop-er">单位</div>
                            <div class="tableTop-san">总数据量</div>
                            <div class="tableTop-si">状态</div>
                            <div class="tableTop-wu">更新时间</div>
                        </div>
                    </div>
                    <div class="gunD">
                        <div class="containerA" v-for="(item, index) in form" :key="item.id"
                            @mouseover="dowmloadover(index)" @mouseleave="downloadleave(index)"
                            :class="isAcitive === index ? 'isAcitive' : ''" @click="lookorgDetail(item, index)">
                            <div class="tableTopA">
                                <div class="tableTop-yi">
                                    <img src="@/assets/imgSrc/yunOne.png" alt="" />
                                </div>
                                <div class="tableTop-er">{{ item.unit }}</div>
                                <div class="tableTop-san">{{ item.totalData }}</div>
                                <div class="tableTop-si">{{ item.status }}</div>
                                <div class="tableTop-wu">{{ item.updateTime }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="itemIndex == 2">
                    <div class="container">
                        <div class="tableTop">
                            <div class="tableTop-yi">#</div>
                            <div class="tableTop-er">操作人</div>
                            <div class="tableTop-san">操作业务系统</div>
                            <div class="tableTop-si">操作状态</div>
                            <div class="tableTop-wu">操作时间</div>
                        </div>
                    </div>
                    <div class="gunD">
                        <div class="containerA" v-for="(item, index) in form" :key="item.id"
                            @mouseover="dowmloadover(index)" @mouseleave="downloadleave(index)"
                            :class="isAcitive === index ? 'isAcitive' : ''" @click="operationLog(item, index)">
                            <div class="tableTopA">
                                <div class="tableTop-yi">
                                    <img src="@/assets/imgSrc/yunOne.png" alt="" />
                                </div>
                                <div class="tableTop-er">{{ item.policeName }}</div>
                                <div class="tableTop-san">{{ item.operateType }}</div>
                                <div class="tableTop-si">{{ item.status }}</div>
                                <div class="tableTop-wu">{{ item.loginTime }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="itemIndex == 3">
                    <div class="container">
                        <div class="tableTop">
                            <div class="tableTop-yi">#</div>
                            <div class="tableTop-er">设备名称</div>
                            <div class="tableTop-san">设备类型</div>
                            <div class="tableTop-si">设备地址</div>
                            <div class="tableTop-wu">设备状态</div>
                        </div>
                    </div>
                    <div class="gunD">
                        <div class="containerA" v-for="(item, index) in form" :key="item.id"
                            @mouseover="dowmloadover(index)" @mouseleave="downloadleave(index)"
                            :class="isAcitive === index ? 'isAcitive' : ''" @click="lookorgDetail(item, index)">
                            <div class="tableTopA">
                                <div class="tableTop-yi">
                                    <img src="@/assets/imgSrc/yunOne.png" alt="" />
                                </div>
                                <div class="tableTop-er">{{ item.deviceName }}</div>
                                <div class="tableTop-san">{{ item.deviceType }}</div>
                                <div class="tableTop-si">{{ item.deviceAddress }}</div>
                                <div class="tableTop-wu">{{ item.deviceStatus }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="itemIndex == 4">
                    <div class="container">
                        <div class="tableTop">
                            <div class="tableTop-yi">#</div>
                            <div class="tableTop-er">接口名称</div>
                            <div class="tableTop-san">接口地址</div>
                            <div class="tableTop-si">最近调用时间</div>
                            <div class="tableTop-wu">接口状态</div>
                        </div>
                    </div>
                    <div class="gunD">
                        <div class="containerA" v-for="(item, index) in form" :key="item.id"
                            @mouseover="dowmloadover(index)" @mouseleave="downloadleave(index)"
                            :class="isAcitive === index ? 'isAcitive' : ''" @click="lookorgDetail(item, index)">
                            <div class="tableTopA">
                                <div class="tableTop-yi">
                                    <img src="@/assets/imgSrc/yunOne.png" alt="" />
                                </div>
                                <div class="tableTop-er">{{ item.connectorName }}</div>
                                <div class="tableTop-san">{{ item.connectorAddress }}</div>
                                <div class="tableTop-wu">{{ item.connectorStatus }}</div>
                                <div class="tableTop-si">{{ item.quoteTime }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { dateTypeFormat } from '@/utils/dateFormat'
export default {
    name: 'SkrivetVueIndex',
    data() {
        return {
            itemIndex: 1,
            value3: '',
            isAcitive: false, // 移入变色
            form: [

            ]
        }
    },

    mounted() {
        this.init()
    },

    methods: {
        onHandleChange(date, dateString) {

        },
        init() {
            this.btnClick(1)
        },
        btnClick(index) {
            this.itemIndex = index
            if (this.itemIndex === 1) {
                this.$api.GET('/modules/operateTransmission/pageList').then(res => {
                    res.data.forEach(item => {
                        item.updateTime = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.updateTime));
                    });
                    this.form = res.data
                })
            } else if (this.itemIndex === 2) {
                this.$api.GET('/modules/operateOpeLog/pageList').then(res => {
                    res.data.forEach(item => {
                        item.loginTime = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.loginTime));
                    });
                    this.form = res.data
                })
            } else if (this.itemIndex === 3) {
                this.$api.GET('/modules/operateDevice/pageList').then(res => {
                    this.form = res.data
                })
            } else if (this.itemIndex === 4) {
                this.$api.GET('/modules/operateConLog/pageList').then(res => {
                    res.data.forEach(item => {
                        item.quoteTime = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.quoteTime));
                    });
                    this.form = res.data
                })
            }
        },
        lookorgDetail(item, index) {
            this.isAcitive = index
            this.$router.push('/yyzx/operate/operateTransmission')
        },
        operationLog(item, index) {
            this.isAcitive = index
            this.$router.push('/yyzx/operate/operateOpeLog')
        },
        // 鼠标移入赋值index 
        dowmloadover(index) {
            this.isAcitive = index
            // console.log(index);
        },
        // 鼠标移出 
        downloadleave(index) {
            this.isAcitive = false
        },
    },
};
</script>
  
<style lang="less" scoped>
::v-deep(.ant-picker-input>input) {
    color: #fff;
}

::v-deep(.anticon svg) {
    color: #bdb8b8;
}

.isAcitive {
    cursor: pointer; // 鼠标小手
    background: #0031B4 !important;
}

::v-deep(.ant-picker) {
    border-radius: 20px;
    background: #0044ff;
    border: none;
}

.gunD {
    overflow: auto;
    height: 180px;
    // padding-top: 15px;
}

::-webkit-scrollbar {
    width: 0;
    height: 10px;
}

.bos {
    height: 323px;
    margin: 0px 20px;
    border: 1px solid #0044ff;
    border-radius: 10px;
    padding: 10px 0 20px 0;
    box-shadow: inset 0px 0px 10px 2px #030753;
    font-size: 14px;

    .nav {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        .navFont {
            color: #fff;
            font-size: 20px;
            font-weight: 600;
        }

        .navOne {
            display: flex;
            align-items: center;
        }

        .navTwo {
            display: flex;
            // padding: 3px 20px;
            margin-right: 10px;
            border-radius: 20px;
            background: #0B0875;
        }
    }
}

.btn {
    font-size: 16px;
    // font-weight: 600;
    padding: 0 10px;
    color: #07c6e5;
}

.active {
    color: #fff;
    text-align: center;
    background: #0045FF;
    border-radius: 20px;
}

.container {
    margin: 20px 30px 5px 30px;
    display: flex;
    font-size: 16px;

    img {
        width: 60px;
        height: 60px;
    }

    .tableTop {
        display: flex;
        color: #fff;
        justify-content: space-around;
        background-color: rgba(0, 15, 70, 0.8);
        width: 100%;
        padding: 15px 0;
        text-align: center;

        .tableTop-yi {
            flex: 0.5;
        }

        .tableTop-er {
            flex: 2;
        }

        .tableTop-san {
            flex: 2;
        }

        .tableTop-si {
            flex: 2;
        }

        .tableTop-wu {
            flex: 3;
        }
    }
}

.containerA {
    margin: 5px 30px 0px 30px;
    display: flex;

    .tableTopA {
        display: flex;
        color: #fff;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(0, 15, 70, 0.8);
        width: 100%;
        padding: 15px 0;
        text-align: center;

        .titleA {
            // display: flex;
            // align-items: center;
            padding-left: 20px;
            flex: 4.5;

            .titleA-img {
                padding-right: 5px;

                img {
                    width: 13px;
                    height: 13px;
                }
            }
        }

        .tableTop-yi {
            flex: 0.5;

            img {
                width: 25px;
                height: 25px;
            }
        }

        .tableTop-er {
            flex: 2;
        }

        .tableTop-san {
            flex: 2;


        }

        .tableTop-si {
            flex: 2;
        }

        .tableTop-wu {
            flex: 3;
        }
    }
}
</style>